<template>
<div id="main_div">
  <el-card style="width: 500px;height: 300px;margin: 100px auto">
    <el-form label-width="80px" style="margin-top: 50px;width: 430px">
      <el-form-item label="用户名">
        <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" placeholder="请输入密码" v-model="user.password"></el-input>
      </el-form-item>
      <div>
        <el-button type="primary" @click="login">登录</el-button>
      </div>
      <a href="/reg" style="color: #0aa1ed;float: right">>立即注册</a>
    </el-form>
  </el-card>
</div>
</template>

<script>
export default {
  name: "LoginView",
  data() {
    return {
      user: []
    }
  },
  methods: {
    login() {
      let data = this.qs.stringify(this.user);
      console.log(this.user);
      this.axios.post("http://localhost:29081/users/login",data)
          .then((response)=>{
            if(response.data.state==20000){
              this.$message.success("登录成功");

              localStorage.setItem('token',JSON.stringify(response.data.data.token));

              const user = response.data.data;
              const data =  {user, exp: new Date().getTime() + 5 * 1000 };//5秒过期
              //把服务器响应的个人信息保存
              localStorage.setItem("user",JSON.stringify(data));
              localStorage.setItem("certStatus",response.data.data.certStatus);
              location.href="/index"
            }else{
              this.$message.error(response.data.message);
            }
          })
    }
  },
}
</script>

<style scoped>
#main_div{
  height: 500px;
  background-size: cover/*设置为封面*/;
  background-position: center;
  background-image: url('/public/blackcar.jpg');
  overflow: hidden;
}
</style>